<div class="card border-dark">
    <div class="card-header">Availability</div>
    <form [formGroup]="availabilityStatusForm">
        <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-sm">Status</span>
            </div>
            
            <select id="status" class="form-control" formControlName="Status"> 
                <option></option>
                <option>N/A</option>
                <option>Available</option>
                <option>Lend-out</option>
                <option>Available at other location</option>
            </select>
        </div>
    
        <div class="input-group input-group-sm mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-sm">Status remark</span>
            </div>
            <textarea class="form-control" id="statusRemark" formControlName="StatusRemark"></textarea>
        </div>
        <div class="card-footer text-muted">
            <button class="btn btn-info" (click)="updateData()" type="button">Update availability status</button>
        </div>
    </form>
</div>